<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <link rel="stylesheet" href="./style/common.css">
  <title>云手机HOST</title>
  <style>
    .page-container {
      border: 1px solid #DFE1E6;
    }
    .tab-content {
      width: 500px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 65px;
      font-size: 18px;
      color: rgba(0,0,0,.5);
      cursor: pointer;
      box-sizing: border-box;
      border-bottom: 1px solid #DFE1E6;
    }
    .rtc-content {
      display: none;
      position: relative;
      margin: 0 auto;
      background-color: #ffffff;
      width: 500px;
      height: 600px;
      justify-content: center;
      align-items: center;
    }
    .rtc-login {
      border: 1px solid #DFE1E6;
      background-color: #ffffff;
      width: 350px;
      height: 385px;
      border-radius: 10px;
      padding: 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .register-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
      position: relative;
    }
    .add-mark {
      position: absolute;
      color: #ffffff;
      font-size: 30px;
      font-weight: bold;
      left: 15px;
      top: 15px;
    }
    .user-content {
      top: 6px;
      left: 8px;
      position: absolute;
      display: flex;
      width: 35px;
      height: 32px;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
    }
    .head {
      width: 16px;
      height: 16px;
      background-color: #526ECC;
      border-radius: 50%;
    }
    .body {
      width: 35px;
      height: 13px;
      background-color: #526ECC;
      border-radius: 16px 16px 0 0;
    }
    .exit-btn {
      border-top: none;
      border-left: none;
      border-bottom: none;
      border-right: 1px solid #dfe1e6;
    }
    .exit-btn{
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: #fff;
    }
    .phone-title {
      padding: 10px;
    }
    .webSocket-tab, .WebRtc-tab {
      flex-grow: 1;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .split-line {
      height: 20px;
      border-right: 1px solid #DFE1E6;;
    }
    .tab-text {
      height: calc(100% - 5px);
      display: flex;
      align-items: center;
      border-bottom: 3px solid transparent;
      border-top: 3px solid transparent;
    }
    .tab-text-active {
      border-bottom: 3px solid #526ECC;
      color:#526ECC;
    }
    .trust-msg {
      margin: 0px;
      text-align: left;
      font-size: 14px;
      text-indent: 2em;
    }

    @media screen and (max-width: 768px) {
      .page-container {
        height: 100%;
        width: 100%;
      }
      .add-mark {
        left: 2px;
        top: 7px;
      }
      .user-content {
        top: 4px;
        left: 2px;
      }
      .register-circle {
        width: 40px;
        height: 40px;
      }
      .page-body {
        width: 100%;
      }
      .login-content, .rtc-content {
        width: 100%;
        height: 100%;
        margin-top: 30px;
      }
      .input-login, .rtc-login {
        width: 300px;
        height: 340px;
      }
      .tab-content {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-container">
      <div class="page-body">
        <div class="tab-content">
          <div class="webSocket-tab" active="true" id="webSocketTab" onclick="changeActiveStatus('webSocketTab', 'webRtcTab')">
            <span class="tab-text tab-text-active">WebSocket</span>
          </div>
        </div>
        <div class="login-content" id="loginContent">
          <div class="input-login" id="inputLogin">
            <div class="input-item">
              <div class="focus-title focus-login-title" id="focusIp">请输入服务器ip</div>
              <input placeholder="请输入服务器ip" type="text" id="ipInput" name="ipInput"
                class="input-value input-login-value" onfocus="hidePlaceholder('ipInput', 'focusIp')" onblur="showPlaceholder('ipInput', 'focusIp')">
            </div>
            <div class="input-item">
              <div class="focus-title focus-login-title" id="focusPort">请输入服务器port</div>
              <input placeholder="请输入服务器port" type="text" id="portInput" name="portInput"
                class="input-value input-login-value" onfocus="hidePlaceholder('portInput', 'focusPort')" onblur="showPlaceholder('portInput', 'focusPort')">
            </div>
            <div class="input-item text-align">
              <button type="button" id="loginBtn" class="input-login-btn" onclick="websocketEnter()">ENTER</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="message-content" id="messageContent">
    <div class="message-modal">
      <div class="header-content">
        <p>温馨提示</p>
      </div>
      <div class="body-content">
        <p class="msg" id="alertMsg"></p>
      </div>
    </div>
  </div>

  <div class="message-content" id="trustModal">
    <div class="message-modal">
      <div class="header-content">
        <p>信任目标机器</p>
      </div>
      <div class="body-content">
        <p class="trust-msg">首次接入需点击下方信任按钮进行信任。</p>
        <p class="trust-msg" id="mobileMsg">待信任页面停止刷新后，返回上一个页面。</p>
        <p class="trust-msg" id="pcMsg">在新页签中依次点击高级、继续前往，待页面停止刷新后，关闭信任页面。</p>
      </div>
      <div class="footer-content">
        <button id="trustBtn" class="exit-btn" onclick="trustHost()">信任</button>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    let resUserInfo = null;
    var _HTTP_MODE_ = false;
    const channelType = {
      'socket': 'WebSocket',
      'rtc': 'WebRtc'
    };

    window.onload = function () {
      if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
        document.getElementById('mobileMsg').style.display = 'block';
        document.getElementById('pcMsg').style.display = 'none';
      } else {
        document.getElementById('pcMsg').style.display = 'block';
        document.getElementById('mobileMsg').style.display = 'none';
      }
    }

    function goLoginPage() {
      let localHref = window.location.href;
      if (window.location.href.indexOf('enter.html') > -1) {
        localHref = window.location.href.replace('enter.html',  'login.html');
      } else if (window.location.href.indexOf('index') > -1) {
        localHref = window.location.href.replace('index',  'login.html');
      } else {
        localHref += 'login.html';
      }

      window.location.href = localHref;
    }

    function hidePlaceholder(elementId, focusId) {
      const inputEle = document.getElementById(elementId);
      const focusTitle = document.getElementById(focusId);
      if (inputEle.placeholder) {
        focusTitle.innerHTML = inputEle.placeholder;
        focusTitle.style.display = 'block';
        inputEle.removeAttribute('placeholder');
      }
    }

    function showPlaceholder(elementId, focusId) {
      const inputEle = document.getElementById(elementId);
      const focusTitle = document.getElementById(focusId);
      const placeholderStr = focusTitle.innerHTML;
      if (inputEle.value) {
        focusTitle.style.display = 'block';
        inputEle.removeAttribute('placeholder');
      } else {
        focusTitle.style.display = 'none';
        inputEle.setAttribute('placeholder', placeholderStr);
      }
    }

    function hideAlertModal() {
      const messageContent = document.getElementById('messageContent');
      setTimeout(() => {
        messageContent.style.display = 'none';
      }, 2000);
    }

    function showAlertModal(message) {
      const messageContent = document.getElementById('messageContent');
      const alertMsg = document.getElementById('alertMsg');
      alertMsg.innerHTML = message;
      messageContent.style.display = 'flex';

      hideAlertModal();
    }

    function changeActiveStatus(activeTabId, otherTabId) {
      const activeTab = document.getElementById(activeTabId);
      const otherTab = document.getElementById(otherTabId);
      const loginContent = document.getElementById('loginContent');
      const rtcContent = document.getElementById('rtcContent');

      const activeTabText = activeTab.querySelector('.tab-text');
      const otherTabText = otherTab.querySelector('.tab-text');
      if (activeTab.getAttribute('active') === 'false') {
        activeTab.setAttribute('active', 'true');
        activeTabText.classList.add('tab-text-active');
        otherTabText.classList.remove('tab-text-active');
        otherTab.setAttribute('active', 'false');
      }

      if (activeTab.innerText === channelType.socket) {
        loginContent.style.display = 'flex';
        rtcContent.style.display = 'none';
      } else {
        loginContent.style.display = 'none';
        rtcContent.style.display = 'flex';
      }
    }

    function trustHost() {
      const hostConfig = JSON.parse(sessionStorage.getItem('cloudPhoneHost'));
      const ipVal = hostConfig.ip;
      const portVal = hostConfig.port;
      window.open('https://' + [ipVal, portVal].join(':'), '_black');

      setTimeout(() => {
        closeTrustModal(true);
      }, 2000);
    }

    function closeTrustModal(isGudge) {
      const trustModal = document.getElementById('trustModal');
      trustModal.style.display = 'none';
      if (!isGudge) {
        return;
      }
      toConnection();
    }

    function websocketEnter() {
      const ipVal = document.getElementById('ipInput').value;
      const portVal = document.getElementById('portInput').value;

      if (!ipVal || !portVal) {
        const message = 'ip和port不能为空';
        showAlertModal(message);
        return;
      }

      const phoneHost = {
        ip: ipVal,
        port: portVal
      };
      sessionStorage.setItem('cloudPhoneHost', JSON.stringify(phoneHost));
      sessionStorage.setItem('channelType', channelType.socket);
      const targetStr = [ipVal, portVal].join(':');
      showTrustModal(targetStr)
    }

    function showTrustModal(targetStr) {
      const trustTargetStr = sessionStorage.getItem('trustTargetList');
      let openModal = false;
      if (trustTargetStr) {
        const trustTargetList = JSON.parse(trustTargetStr);
        if (trustTargetList.includes(targetStr)) {
          openModal = false;
        } else {
          openModal = true;
        }
      } else {
        openModal = true;
      }

      if (openModal && !_HTTP_MODE_) {
        const trustModal = document.getElementById('trustModal');
        trustModal.style.display = 'flex';
        return;
      }

      toConnection();
    }

    function rtcEnter() {
      const appIdVal = document.getElementById('rtcAppIdInput').value;
      const appKeyVal = document.getElementById('rtcAppKeyInput').value;
      const envVal = document.getElementById('rtcEnvInput').value;
      const roomIdVal = document.getElementById('rtcRoomIdInput').value;

      if (!appIdVal || !appKeyVal || !envVal || !roomIdVal) {
        const message = 'RTC参数不能为空';
        showAlertModal(message);
        return;
      }

      if (!['root', 'gammagreen', 'gammablue'].includes(envVal)) {
        const message = '云手机Env错误，请输入正确的值';
        showAlertModal(message);
        return;
      }

      const rtcConfig = {
        appId: appIdVal,
        appKey: appKeyVal,
        env: envVal,
        roomId: roomIdVal
      };
      sessionStorage.setItem('rtcConfig', JSON.stringify(rtcConfig));
      sessionStorage.setItem('channelType', channelType.rtc);

      toConnection();
    }

    function toConnection() {
      let localHref = window.location.href;
      if (window.location.href.indexOf('enter.html') > -1) {
        localHref = window.location.href.replace('enter.html',  'demo.html');
        window.location.href = localHref;
      }
    }
  </script>
</body>
</html>